<template>
  <div
    class="img_show_item"
    :style="{
      width: propsVal.width || 'auto',
      height: propsVal.height || 'auto',
      fontSize,
    }"
    @click="handleClick"
  >
    <div
      class="img_row_item"
      v-for="(rowItem, index) in tipsList || []"
      :key="index"
    >
      <img
        v-if="index === 1 && propsVal.imgPath"
        v-lazyLoad="propsVal.imgPath"
        :style="{
          width: propsVal.imgWidth,
          height: propsVal.imgHeight,
        }"
        alt=""
        :key="index"
      />
      <div class="text_wrapper">
        <template :key="textIndex" v-for="(item, textIndex) in rowItem || []">
          <span
            class="text_span"
            :class="{
              bold: item.bold,
              clickAble: item.cb,
            }"
            :style="item.style"
            @click="item.cb && item.cb(item, textIndex)"
          >
            <template v-if="contentShow">
              {{ contentFil(item.content, item.contentFil) }}{{ item.unit }}
              <slot :name="item.slotName"></slot>
            </template>
          </span>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
const propsVal = defineProps({
  defaultSize: {
    type: [Number, String],
    default: 14,
  },
  imgPath: {
    type: String,
    default: null,
  },
  imgWidth: {
    type: String,
    default: null,
  },
  imgHeight: {
    type: String,
    default: null,
  },
  width: {
    type: String,
    default: null,
  },
  height: {
    type: String,
    default: null,
  },
  to: {
    type: String,
    default: null,
  },
  type: {
    type: String,
    default: null,
  },
  tipList: {
    type: Array,
    default: null,
  },
  contentShow: {
    type: Boolean,
    default: true,
  },
});
function contentFil(val, fil) {
  if (fil) {
    val = fil(val);
  }
  return val;
}
const tipsList = computed(() => {
  let res =
    (propsVal.tipList || []).map((item) => {
      if (item && !Array.isArray(item)) {
        return [item];
      }
      return item || [];
    }) || [];
  return res;
});
const fontSize = computed(() => {
  const isNumber = typeof propsVal.defaultSize === "number";
  return isNumber ? propsVal.defaultSize + 'px' : propsVal.defaultSize;
});
const router = useRouter();
function handleClick() {
  switch (propsVal.type) {
    case "link":
      propsVal.to &&
        router.push({
          path: propsVal.to,
        });
      break;

    default:
      break;
  }
}
</script>

<style scoped lang="scss">
.img_show_item {
  font-size: 14px;
  .img_row_item {
    display: flex;
    align-items: center;
    > img {
      transition: width 0.5s ease, height 0.5s ease;
    }

    .text_wrapper {
      margin-left: 8px;
      span.text_span {
        font-size: 1em;
        display: block;
        line-height: 1.5;
        white-space: nowrap;
        &.bold {
          font-weight: bold;
          font-size: 1.286em;
          color: #000000;
        }
        &.clickAble {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
